<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<form id="myForm" class="form-horizontal" action="tushu/add" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="tu_name" class="col-sm-2 control-label">图书名称</label>
        <div class="col-sm-10">
            <input type="text" name="tu_name" class="form-control" id="tu_name" placeholder="请输入书名">
        </div>
    </div>
    <div class="form-group">
        <label for="jieyue" class="col-sm-2 control-label">借阅价格</label>
        <div class="col-sm-10">
            <input type="text" name="jieyue" class="form-control" id="jieyue" placeholder="请输入借阅价格">
        </div>
    </div>
    <div class="form-group">
        <label for="chushou" class="col-sm-2 control-label">出售价格</label>
        <div class="col-sm-10">
            <input type="text" name="chushou" class="form-control" id="chushou" placeholder="请输入出售价格">
        </div>
    </div>


    <%--图书分类--%>
    <div class="form-group">
        <label for="leixing" class="col-sm-2 control-label">图书类型</label>
        <div class="col-sm-10">
            <select class="form-control" data="${tushu.lx.lx_id}" name="lx.lx_id" id="leixing">
                <c:forEach items="${requestScope.leixing}" var="category">
                    <option value="${category.lx_id}">${category.lx_name}</option>
                </c:forEach>
            </select>
            <script>
                $('#category').val($('#category').attr('data'));
            </script>
        </div>
    </div>
    <div class="form-group">
        <label for="chubanshe" class="col-sm-2 control-label">出版社</label>
        <div class="col-sm-10">
            <select class="form-control" data="${tushu.chubanshe.chubanshe_id}" name="chubanshe.cbs_id" id="chubanshe">
                <c:forEach items="${requestScope.chubanshe}" var="category">
                    <option value="${category.cbs_id}">${category.cbs_name}</option>
                </c:forEach>
            </select>
        </div>
    </div>



    <%--图片上传--%>
    <div class="form-group">
        <label for="book_img" class="col-sm-2 control-label">上传图片</label>
        <div class="col-sm-10">
            <input type="file" name="book" class="form-control" id="book_img">
        </div>

    </div>
    <div class="form-group">
        <label for="book_img" class="col-sm-2 control-label">头像预览:</label>
        <div class="col-sm-10">
            <div id="show"></div>
        </div>
    </div>

    <script>
//    $("#show").append("<img height='200px' width='200px'id=\"showw\" src=\"\">");
//    var u_img = document.getElementById("img").value;
//    //  显示要修改的图片
//    $("#showw").attr("src",u_img);
    //         单击图片按钮显示出来
    $('#book_img').on('change',function() {
    $("#show").text("");
    //加载选择图片
    var r= new FileReader();
    f=document.getElementById('book_img').files[0];
    r.readAsDataURL(f);
    r.onload=function  (e) {
    $("#show").append("<img width='200px' height='200px' id=\"showw\" src=\"\">");
    document.getElementById('showw').src=this.result;
    };
    })
    </script>
</form>
